<template>
  <div style="display: flex; flex-wrap: wrap; gap: 20px;">
    <div class="cardWrap">
      <YewuPerformBonus
        title="业务员毛利奖金"
        :yewuBouns="yewuConfig.yewuBouns"
        ref="yewuBouns"
        :edit="isEdit" />
    </div>
    <div class="cardWrap" v-if="job2 === 2" >
      <MsgFee
        title="信息费"
        ref="msgFee"
        v-if="job2 === 2"
        :contrctAmount="yewuConfig.msgFee.contrctAmount"
        :rate="yewuConfig.msgFee.rate"
        :contrctStep="yewuConfig.msgFee.contrctStep"
        :bonusStep="yewuConfig.msgFee.bonusStep"
        :edit="isEdit" />
    </div>
    <div class="cardWrap">
      <StaticCard
        title="固定提成"
        ref="staticBonus"
        :rate="yewuConfig.staticBonus.rate"
        :edit="isEdit" />
    </div>
    <!-- <div style="width: 100%" v-if="demo" >
      <DemoCard title="模拟" v-if="demo" />
    </div> -->
  </div>
</template>

<script>
import YewuPerformBonus from './compontents/YewuPerformBonus'
import MsgFee from './compontents/MsgFee'
import StaticCard from './compontents/StaticCard'
// import DemoCard from './compontents/DemoCard'

export default {
  name: 'YewuCards',
  components: {
    YewuPerformBonus,
    MsgFee,
    StaticCard
    // DemoCard
  },
  props: {
    isEdit: {
      type: Boolean,
      default: () => false
    },
    yewuConfig: {
      type: Object,
      default: () => {}
    },
    demo: {
      type: Boolean,
      default: () => true
    },
    job2: {
      type: [Number, String, Boolean],
       default: () => true
    }
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    getConfig () {
      const yewuBouns = this.$refs.yewuBouns.getValue()
      const msgFee = this.job2 === 2 ? this.$refs.msgFee.getValue() : {}
      const staticBonus = this.$refs.staticBonus.getValue()
      return { yewuBouns, msgFee, staticBonus }
    }
  }
}
</script>
<style lang="less" scoped>
.cardWrap {
  width: calc(50% - 40px);
}
</style>
